<template>
    <div class="home-recommond">
        <span class="more">雷达歌单</span>
        <span class="box">更多></span>
        <div class="wrapper" ref="wrapper">
        <ul class="content" ref="content">
            <li v-for="(item,i) in listData" :key="i">
                <div class="cover">
                    <van-image :src="item.coverImgUrl" radius="1rem"/>
                    <span>{{ item.playCount | numFilter(1)}}亿</span>
                </div>
                <span>{{ item.name }}</span>
            </li>
        </ul>
    </div>
    </div>
</template>
<script>
import BScroll from "better-scroll";
export default {
    data(){
        return{
            listData:[]
        }
    },
    created(){
        this.getSongListData()
    },
    methods:{
        getSongListData(){
            this.$request('get','/top/playlist')
            .then(res=>{
                console.log(res)
                if(res.code==200){
                    this.listData=res.playlists;
                }
                this.betterScrollHorizontal(this.listData.length,10);
            });
        },
        betterScrollHorizontal(num,itemWidth){
            this.$refs.content.style.width=num * itemWidth + "rem";
                this.$nextTick(() => {
                    this.scroll =new BScroll(this.$refs.wrapper, {
                        scrollY:false,
                        scrollX: true,
                        startX: 0,
                    });
                });
          
    },
},
    filters:{
        numFilter(value,num){
            return parseFloat(value/10000).toFixed(num)
        }
    }
}
</script>
<style scoped>
.more{
    float: left;
}
.box{
      float: right;
      border: 1px solid #54493b;
     
        font-size: 15px;
       
       border-radius: 20px;
        width: 3.5rem;
        display:inline-flex;
}
.cover > span {
        position: absolute;
        right: 0.2rem;
        top: 0.4rem;
        background-color:#a6a8a0;
        color: white;
        font-size: 14px;
        border-radius: 1rem;
        width: 5rem;
        display: inline-block;
    }
    .cover {
        position: relative;
    }
    .wrapper {
        width: 100%;
        overflow: hidden;
    }
    ul.content li {
        width: 10rem;
        display: inline-block;
        vertical-align: top;
    }
    ul.content li * {
        margin: 0.1rem;
    }
    ul.content li > span {
        font-size: 0.8rem;
        color: #54493b;
    }
</style>